<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue-Learning</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
</head>
<!-- 自定义组件 -->

<body>
  <div id="demo">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
  </div>
  <div id="demo2">
    {{message}}
  </div>
  <script>
    Vue.component('button-counter', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">You clicked me {{count}} times.</button>'
    });
    new Vue({
      el: "#demo"
    })
    new Vue({
      el: "#demo2",
      data: {
        message: 123
      }
    })
  </script>

  <div id="demo3">
    <blog-post title="My journey with Vue"></blog-post>
    <blog-post title="Blogging with Vue"></blog-post>
    <blog-post title="Why Vue is so fun"></blog-post>
  </div>
  
  <!-- 通过Prop向组件传递数据, script脚本必须在html标签后面才能生效-->
  <script>
    Vue.component('blog-post', {
      props: ['title'],
      template: `
    <div class="blog-post">
      <h3>{{ title }}</h3>
    </div>
  `
    });
    new Vue({
      el: "#demo3",
      data: {
        posts: [
          {id: 1, title: 'test1'},
          {id: 2, title: 'test2'}
        ]
      }
    })
  </script>
  
  <!-- Props绑定对象 -->
  <div id="blog-post-demo">
      <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
    </div>
  <script>
    new Vue({
      el: "#blog-post-demo",
      data: {
        posts: [
          {id: 1, title: 'test1'},
          {id: 2, title: 'test2'}
        ]
      }
    })
  </script>
  
  <!-- 监听子组件事件 -->
  <div id="blog-post-events-demo">
    <div :style="{fontSize: postFontSize + 'em'}">
      <blog-post2
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:title="post.title"
        v-on:enlarge-text="postFontSize += 0.1"></blog-post2>
    </div>
  </div>
  <script>
    Vue.component('blog-post2', {
      props: ['title'],
      template: `
    <div class="blog-post">
      <h3>{{ title }}</h3>
      <button v-on:click="$emit('enlarge-text')">
        Enlarge text
      </button>
    </div>
  `
    });
    new Vue({
      el: "#blog-post-events-demo",
      data: {
        posts: [
          {id: 1, title: 'event1'},
          {id: 2, title: 'event2'}
        ],
        postFontSize: 1
      }

    })
  </script>
</body>
</html>